<!DOCTYPE html>
<html lang="ru-RU">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="Trumplin.net Dev Team">
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
	<meta name="HandheldFriendly" content="True">
	<title></title>
	<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Istok+Web:400,400italic,700,700italic&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'>
	<link href="/clientarea/css/styles.css" rel="stylesheet" type="text/css">
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="/clientarea/js/amcharts.js" type="text/javascript"></script>
	<script src="/clientarea/js/serial.js" type="text/javascript"></script>
<script type="text/javascript">
	function handleHeight(){
		var h = $(document).height();
		var h1 = $("#left-sidebar").height(); h=h-40; h1=h1-40;
		if (h<=h1){ $("#main-content").css("height",h1);}else
		{$("#main-content").css("height","100%");}
	}
</script>	
<script type="text/javascript">
	$(function(){
		$("#no-js-warning").addClass("hidden");
		handleHeight();
		var n = navigator.appVersion;		
		var p = n.indexOf("WebKit");
		if (p>=0){ $("div.select-style").addClass("webkiteng");}		
	});
</script>
<script type="text/javascript">
	$(function(){
		$(window).resize(function(){
			handleHeight();
		});
	});
</script>
<script type="text/javascript">
	$(function(){
		$(window).keydown(function(){
			handleHeight();
		});
	});
</script>
<script type="text/javascript">
	$(function(){
		$(window).click(function(){
			handleHeight();
		});
	});
</script>
<script>
	$(function(){
		var a = $("span.unread-items-count-text");
		var b = a.parent(); 
		var c = a.text();		
		if ($.trim(c)=="0"){ b.addClass("hidden");}else{
		if ($.trim(c)==""){ b.addClass("hidden"); }}
	});
</script>
<script type="text/javascript">
	$(function(){
		$( "#client-area-sidebar-nav li a").hover(function() {
			var a = $(this).find("img"); 
			var b = a.attr("class");
			var c = b+"-hovered";
			a.removeClass(b);
			a.addClass(c);
		}, function() {
			var a = $(this).find("img"); 
			var b = a.attr("class");
			var c = b.replace("-hovered","");
			a.removeClass(b);
			a.addClass(c);
		});		
	});
</script>
<script type="text/javascript">
	$(function(){
		$("select").focus(function(){
			var a = $(this).parent();
			a.addClass("select-focused");
		});
		$("select").focusout(function(){
			var a = $(this).parent();
			a.removeClass("select-focused");
		});
	});
</script>
<script type="text/javascript">
	AmCharts.monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
	AmCharts.shortMonthNames = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
	AmCharts.dayNames  = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
	AmCharts.shortDayNames = ['Пон', 'Вт', 'Ср', 'Чет', 'Пят', 'Суб', 'Вос'];	
var chart;
var chartData = [{
     date: "01.03.2014",
     free: "23.5",
	 busy: "7.0",
	 notworked: "1.0"
 }, {
     date: "02.03.2014",
     free: "2.0",
	 busy: "22.0",
	 notworked: "0.0"
 }, {
     date: "03.03.2014",
     free: "9.5",
	 busy: "9.5",
	 notworked: "1.5"
 }, {
     date: "04.03.2014",
     free: "4.5",
	 busy: "14.5", 
	 notworked: "0.5"
 }, {
     date: "05.03.2014",
     free: "8.2",
	 busy: "18.2",
	 notworked: "0.2"
 }, {
     date: "06.03.2014",
     free: "1.5",
	 busy: "21.5",
	 notworked: "1.5"
 }, {
     date: "07.03.2014",
     free: "5.2",
	 busy: "25.2",
	 notworked: "0.2"
 }, {
     date: "08.03.2014",
     free: "6.5",
	 busy: "26.5",
	 notworked: "0.5"
 }, {
     date: "09.03.2014",
     free: "3.3",
	 busy: "23.3",
	 notworked: "0.33"
 }, {
     date: "10.03.2014",
     free: "1.3",
	 busy: "18.3",
	 notworked: "0.3"
 }]; 

// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
    //chart.zoomToIndexes(0, chart.dataProvider.length);
}

// create chart
AmCharts.ready(function() {

    // SERIAL CHART    
    chart = new AmCharts.AmSerialChart();
	
    chart.marginTop = 0;
	chart.marginLeft = 0;
    chart.autoMarginOffset = 0;
    chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
    chart.zoomOutButton = {
        backgroundColor: '#000000',
        backgroundAlpha: 0.15
    };
	chart.dataDateFormat = "DD.MM.YYYY";
    chart.dataProvider = chartData;
    chart.categoryField = "date";

    // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
    chart.addListener("dataUpdated", zoomChart);

    // AXES
    // category                
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.dashLength = 1;
    categoryAxis.gridAlpha = 0.15;
    //categoryAxis.axisColor = "#DADADA";
    categoryAxis.position = "top";
	categoryAxis.minorGridEnabled = true;
	

    // first value axis (on the left)
    var valueAxis1 = new AmCharts.ValueAxis();
    //valueAxis1.axisColor = "#FF6600";
    //valueAxis1.axisThickness = 0;
    //valueAxis1.gridAlpha = 0.15;	
    chart.addValueAxis(valueAxis1);

    // GRAPHS
    // first graph
    var graph1 = new AmCharts.AmGraph();
    graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
    graph1.title = "Свободен";
    graph1.valueField = "free";
    graph1.bullet = "round";
    graph1.hideBulletsCount = 10;
    graph1.bulletBorderAlpha = 1;    
    graph1.bulletSize = 6;    
    graph1.lineThickness = 2;    
	graph1.bulletColor = "#FFF";
    graph1.bulletBorderColor = "#BBE807";
    graph1.lineColor = "#BBE807";
    chart.addGraph(graph1);

    // second graph                
    var graph2 = new AmCharts.AmGraph();
    graph2.valueAxis = valueAxis1; // we have to indicate which value axis should be used
    graph2.title = "Занят";
    graph2.valueField = "busy";
    graph2.bullet = "round";
    graph2.hideBulletsCount = 10;
	graph2.bulletBorderAlpha = 1;
	graph2.bulletSize = 6;
	graph2.lineThickness = 2;
	graph2.bulletColor = "#FFF";
	graph2.bulletBorderColor = "#FFBA00";
	graph2.lineColor = "#FFBA00";
    chart.addGraph(graph2);

    // third graph
    var graph3 = new AmCharts.AmGraph();
    graph3.valueAxis = valueAxis1; // we have to indicate which value axis should be used
    graph3.valueField = "notworked";
    graph3.title = "Не работал";
    graph3.bullet = "round";
    graph3.hideBulletsCount = 10;
	graph3.bulletBorderAlpha = 1;
	graph3.bulletSize = 6;
	graph3.lineThickness = 2;
	graph3.bulletColor = "#FFF";
	graph3.bulletBorderColor = "#FF0000";
	graph3.lineColor = "#FF0000";
    chart.addGraph(graph3);

    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorPosition = "mouse";
    chart.addChartCursor(chartCursor);

    // SCROLLBAR
    //var chartScrollbar = new AmCharts.ChartScrollbar();
	//chartScrollbar.scrollbarHeight = 25;
    //chart.addChartScrollbar(chartScrollbar);

    // LEGEND
    var legend = new AmCharts.AmLegend();
    legend.marginLeft = 0;
	legend.position = "bottom";
	legend.align = "center";
	legend.valueAlign = "left";	
    chart.addLegend(legend);

    // WRITE
    chart.write("chartdiv");
});
</script>
<script type="text/javascript">
	$(function(){
		$( "input[type=button].calendar-button").click(function() {
			$("#date-popup").removeClass("hidden");
			var h = $(window).height(); var w = $("#main-content").width();			
			var h1 = $("#date-popup").height(); var w1 = $("#date-popup").width();
			var a = $(window).width();
			if (a>=980){				
				var w2 = $("#left-sidebar").width(); w+=40; w2+=40; //40-padding 20px
				$("#date-popup").css("top",h/2-h1/2);
				$("#date-popup").css("left",(w/2-w1/2)+w2);			
			}else{				
				$("#date-popup").css("top",h/2-h1/2);
				$("#date-popup").css("left",w/2-w1/2);			
			}			
		});		
	});
</script>
<script type="text/javascript">
	$(function(){
		$("select[name=tow-id]").change(function() {
			var a = $("#range-text").val();
			if ($.trim(a)!=""){
				$("form[name=client-area-drivers-form]").submit();
			}
		});		
	});
</script>
<script type="text/javascript">
	$(function(){
		$( "#date-range-selector").click(function() {
			var a = $("#popup-tabs-contents li div.active-tab-item input[name=start-range]");
			var b = $("#popup-tabs-contents li div.active-tab-item input[name=finish-range]");
			$("input.calendar-button").val(a.val()+" — "+b.val());
			$("#range-text").val(a.val()+" — "+b.val());
			$("#date-popup").addClass("hidden");
			var c = $("select[name=tow-id]").find("option:selected").val();
			var d = $("select[name=tow-id] option:first-child").val();
			if (c!=d){ $("form[name=client-area-drivers-form]").submit();}
		});		
	});
</script>
<script type="text/javascript">
	$(function(){
		$("select[name=group-by]").change(function() {
			var a = $("#range-text").val();			
			if ($.trim(a)!=""){
				var b = $("select[name=tow-id]").find("option:selected").val();
				var c = $("select[name=tow-id] option:first-child").val();
				if (b!=c){ $("form[name=client-area-drivers-form]").submit();}
			}
		});		
	});
</script>
<script type="text/javascript">
	$(function(){
		$( "#close-popup").click(function() {
			$("#date-popup").addClass("hidden");
		});		
	});
</script>
<script type="text/javascript">
	$(document).keydown(function(e){			
		if (e.keyCode == 27){
			var a = $("#date-popup").hasClass("hidden");	
			if (a == false){$("#date-popup").addClass("hidden");}
		}
	});
</script>
<script type="text/javascript">
	$(function(){
		$("#popup-tabs-head li").click(function(){
			$( "#popup-tabs-head li").removeClass("active-tab-item");
			$(this).addClass("active-tab-item");
			$("#popup-tabs-contents li div").removeClass("hidden");
			$("#popup-tabs-contents li div").addClass("hidden");
			var a = $(this).find("span");
			var b = a.attr("id");
			var c = $("#popup-tabs-contents li div."+b);
			c.removeClass("hidden");
			$("#popup-tabs-contents li div").removeClass("active-tab-item");
			c.addClass("active-tab-item");
		});
	});
</script>
<script type="text/javascript">
	$(function(){
		$("input[name=start-range]").keypress(function(e){
			var ca = new Array( 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 );
			var c = !e.charCode ? e.which : e.charCode;
			if ($.inArray(c, ca) !== -1){}else{e.preventDefault();}			
		});
		$("input[name=finish-range]").keypress(function(e){
			var ca = new Array( 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 );
			var c = !e.charCode ? e.which : e.charCode;
			if ($.inArray(c, ca) !== -1){}else{e.preventDefault();}
		});
	});
</script>
</head>
<body>
	<div id="date-popup" class="hidden">
		<div id="date-popup-inner">
			<div id="date-popup-inner-header">
				<img id="close-popup" src="/clientarea/img/icon.png">
			</div>
			<div id="date-popup-content">
				<p>Укажите период</p>
				<ul id="popup-tabs-head">
					<li>
						<span id="tab-range-week">Неделя</span>
					</li>
					<li class="active-tab-item">
						<span id="tab-range-month">Месяц</span>
					</li>
					<li>
						<span id="tab-range-quartal">Квартал</span>
					</li>
					<li>
						<span id="tab-range-year">Год</span>
					</li>	
				</ul>
				<ul id="popup-tabs-contents">
					<li>
						<div class="hidden tab-range-week">
							<input type="text" class="text-field" name="start-range" value="17.03.2014"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
						</div>
					</li>
					<li>
						<div class="active-tab-item tab-range-month">
							<input type="text" class="text-field" name="start-range" value="24.02.2014"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
						</div>
					</li>
					<li>
						<div class="hidden tab-range-quartal">
							<input type="text" class="text-field" name="start-range" value="24.12.2013"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
						</div>
					</li>
					<li>
						<div class="hidden tab-range-year">
							<input type="text" class="text-field" name="start-range" value="24.03.2013"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
						</div>
					</li>
				</ul>
				<div class="clear"></div>
			</div>
			<div id="date-popup-inner-footer">
				<button id="date-range-selector" class="single-button">Выбрать</button>
			</div>
		</div>
	</div>
	<div id="wrapper">
		<div id="no-js-warning"><p>Внимание! Ваш браузер не поддерживает JavaScript либо данная возможность отключена. Настоятельно рекомендуется исправить ситуацию для корректного отображения сайта.</p></div>
		<div id="left-sidebar">
			<a href="http://towing.su"><img id="logo" src="/clientarea/img/logo.png" alt="Главная" title="Главная"></a>
			<ul id="client-area-sidebar-nav">
				<li>
					<a href="/clientarea/index.html"><img class="icon-1" src="/clientarea/img/icon.png"><span>Главная</span></a>
				</li>
				<li>
					<a href="/clientarea/messages.html"><img class="icon-2" src="/clientarea/img/icon.png"><span>Сообщения</span></a><span class="unread-items"><span class="unread-items-count"><span class="unread-items-count-text">12</span></span></span>
				</li>				
				<li>
					<a href="/clientarea/statistics.html"><img class="icon-3" src="/clientarea/img/icon.png"><span>Статистика</span></a>
				</li>
				<li>
					<a href="/clientarea/drivers.html" class="active-item"><img class="icon-4" src="/clientarea/img/icon.png"><span>Водителям</span></a>
				</li>
				<li>
					<a href="/clientarea/add-funds.html"><img class="icon-5" src="/clientarea/img/icon.png"><span>Пополнить счет</span></a>
				</li>
				<li>
					<a href="/clientarea/profile.html"><img class="icon-6" src="/clientarea/img/icon.png"><span>Профиль</span></a>
				</li>
				<li>
					<a href="/clientarea/price-list.html"><img class="icon-7" src="/clientarea/img/icon.png"><span>Прайс-лист</span></a>
				</li>
				<li>
					<a href="/?logout"><img class="icon-8" src="/clientarea/img/icon.png"><span>Выйти</span></a>
				</li>
			</ul>
			<div class="clear"></div>
			<p id="client-area-sidebar-balance">На Вашем балансе <span>$242,45</span></p>			
		</div>
		<div id="main-content">
			<h1>Водителям</h1>
			<p>На этой странице вы можете просмотривать все добавленные вами эвакуаторы, у каждого есть свой статус и так далее На этой странице вы можете просмотривать все добавленные вами эвакуаторы, у каждого есть свой статус и так далее. На этой странице вы можете просмотривать все добавленные вами эвакуаторы, у каждого есть свой статус и так далее.</p>
			<div id="content-inner">
				<form enctype="multipart/form-data" action="" method="get" name="client-area-drivers-form">
					<div id="content-inner-top">
						<span class="in-row">Показать</span>
						<div class="select-style w126px to-left">
							<select name="tow-id" class="select-styled w146px">
								<option selected disabled>ID эвакуатора</option>
								<option value="5487">5487</option>
								<option value="7486">7486</option>								
							</select>														
						</div>						
						<span class="in-row">за период</span>
						<div class="field-outer">
							<img src="/clientarea/img/icon.png"><input type="button" class="single-button calendar-button" value="24.02.2013 — 24.03.2014"><input id="range-text" type="text" name="range" value="24.02.2013 — 24.03.2014" class="hidden">
						</div>
						<span class="in-row">и сгруппировать по</span>
						<div class="select-style w106px to-left">
							<select name="group-by" class="select-styled w126px">
								<option value="days">Дням</option>
								<option value="weeks">Неделям</option>
								<option value="months" selected>Месяцам</option>
							</select>														
						</div>
					</div>
					<div class="clear"></div>
					<div id="chartdiv"></div>
					<table class="client-area-table">
						<thead>
							<tr>
								<th><div class="title mid-cell"><p>Дата</p></div></th>
								<th><div class="title mid-cell"><p>Свободен</p></div></th>
								<th><div class="title mid-cell"><p>Занят</p></div></th>
								<th><div class="title mid-cell"><p>Не работал</p></div></th>
							</tr>					
						</thead>
						<tbody>
							<tr>						
								<td><div class="cell mid-cell"><p>07.02.2014 — 07.03.2014</p></div></td>
								<td><div class="cell mid-cell"><p>25 часов 23 минут</p></div></td>
								<td><div class="cell mid-cell"><p>25 часов 23 минут</p></div></td>
								<td><div class="cell mid-cell"><p>25 часов 23 минут</p></div></td>
							</tr>
							<tr>						
								<td><div class="cell mid-cell"><p>08.03.2014 — 08.04.2014</p></div></td>
								<td><div class="cell mid-cell"><p>125 часов 22 минуты</p></div></td>
								<td><div class="cell mid-cell"><p>125 часов 22 минуты</p></div></td>
								<td><div class="cell mid-cell"><p>125 часов 22 минуты</p></div></td>
							</tr>
							<tr>						
								<td><div class="cell mid-cell"><p>09.04.2014 — 09.05.2014</p></div></td>
								<td><div class="cell mid-cell"><p>25 часов 31 минута</p></div></td>
								<td><div class="cell mid-cell"><p>25 часов 31 минута</p></div></td>
								<td><div class="cell mid-cell"><p>25 часов 31 минута</p></div></td>
							</tr>
							<tr>						
								<td><div class="cell mid-cell"><p>07.02.2014 — 07.03.2014</p></div></td>
								<td><div class="cell mid-cell"><p>2 часа 3 минуты</p></div></td>
								<td><div class="cell mid-cell"><p>2 часа 3 минуты</p></div></td>
								<td><div class="cell mid-cell"><p>2 часа 3 минуты</p></div></td>
							</tr>
							<tr>
								<td><div class="cell mid-cell"><p>08.03.2014 — 08.04.2014</p></div></td>
								<td><div class="cell mid-cell"><p>25 часов 23 минут</p></div></td>
								<td><div class="cell mid-cell"><p>25 часов 23 минут</p></div></td>
								<td><div class="cell mid-cell"><p>25 часов 23 минут</p></div></td>
							</tr>
							<tr class="total-row">
								<td><div class="cell mid-cell"><p>Итого:</p></div></td>
								<td><div class="cell mid-cell"><p>190 часов 45 минут</p></div></td>
								<td><div class="cell mid-cell"><p>190 часов 45 минут</p></div></td>
								<td><div class="cell mid-cell"><p>190 часов 45 минут</p></div></td>
							</tr>
						</tbody>
					</table>
				</form>
			</div>	
		</div>
	</div>
</body>
</html>